<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      v-bind：
        作用是：用于绑定数据到元素的属性上。

        使用场景非常多，Vue 提供了一个简写的写法。直接 :

      v-on:
        作用是：用于绑定事件
        语法：
          1. 普通写法：v-on:xx事件="事件处理函数"     v-on:click  v-on:keyup ...
          2. 简写方式：@xx事件="事件处理函数"

          事件处理函数，可以是 methods 选项中声明的函数，也可以是内联事件处理函数
            1. 声明的： v-on:click="handleClick"
            2. 内联的： v-on:click="表达式书写"
   -->
    <div id="app">
      <!-- 静态写法 -->
      <p title="hello">我的天，李威真帅</p>

      <!-- 动态绑定，当 msg 变化时，title 属性的值也会更新变化 -->
      <p v-bind:title="msg">我的天，李威真帅</p>

      <input v-bind:type="curType" :placeholder="tips" />

      <hr />
      <!-- 绑定为一个 methods 中声明的函数 -->
      <button v-on:click="handleClick">点我，修改 curType</button>
      <!-- 直接使用内联的表达式写法 -->
      <button v-on:click="curType = 'password'">点我，修改 curType</button>
      <!-- 简写语法 -->
      <button @click="curType = 'password'">点我，修改 curType</button>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          content: "<button>按钮</button>",
          curType: "text",
          tips: "请输入用户名",
        },
        // 用于声明函数，这些函数可以直接在模板（html）中使用，也可以通过实例对象点出来（vm.xxx()）
        methods: {
          // 函数的完整写法
          // handleClick: function () {
          //   console.log("1");
          // },
          // 简写写法
          handleClick() {
            // 函数内的 this 指向的就是当前的实例对象 vm
            console.log("2", this, this === vm);
            this.curType = "password";
          },
        },
      });
    </script>
  </body>
</html>
